<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<% request.setCharacterEncoding("UTF-8"); %>
<div class="page-header">
	<h3 class="font24">Order</h3>
</div>
<article>
	<div class="row">
		<div class="span10 offset1">
			<table class="table table-striped bborder">
				<colgroup>
						<col style="width:10%" />
						<col style="width:60%" />
						<col style="width:10%" />
						<col style="width:10%"  />
						<col style="width:10%" />
				</colgroup>
					<tr>
						<th scope="col">&nbsp;</th>
						<th scope="col">제품명</th>
						<th scope="col">수량</th>
						<th scope="col">가격</th>
						<th scope="col">취소</th>
					</tr>
				<tbody>
					<tr>
						<th><div><img src="img/man/m1.jpg" class="img-polaroid1"></div></th>
						<th><div class="tb-left">[s.style]mt000001</div><div class="tb-left">옵션 ▷ size: L </div></th>
						<th>1</th>
						<th>13000</th>
						<th><a href="" class="btn btn-inverse cartcl" ><span class="cartclspan">삭제</span></a></th>
					</tr><!-- 공지사항 -->
					<!-- 본문행 출력시작! -->
					<c:forEach var="b" items="${boards}">
						<tr><td>${b.bno}</td>
						<td><div class="tb-left"><a href="board/view.mvc3?bno=${b.bno}&bid=">
							${b.title}</a></div></td>
						<td>${b.uid}</td><td>${fn:substring(b.regdate, 0, 10)}</td>
						<td>${b.goods}</td></tr>
					</c:forEach>	
					<!-- 본문행 출력끝! -->					
				</tbody>
			</table>
			
			<table class="table table-striped bborder">
				<colgroup>
						<col style="width:25%" />
						<col style="width:25%" />
						<col style="width:25%" />
						<col style="width:25%"  />
				</colgroup>
					<tr>
						<th scope="col">총 상품 수량</th>
						<th scope="col">총 상품 금액</th>
						<th scope="col">택배비</th>
						<th scope="col">총 결제 금액</th>
					</tr>
				<tbody>
					<tr>
						<th>1</th>
						<th>13000</th>
						<th>2500</th>
						<th>15500</th>
					</tr><!-- 공지사항 -->
				</tbody>
			</table>
			
			
				
					<div><h4>주문 하시는 분</h4></div>
					<form id="myinfofrm" class="well form-horizontal">
						<fieldset>
							<div class="control-group info">
								<label class="control-label" for="name">이름</label>
								<div class="controls">
									<input type="text" name="name" id="name"
									class="span2" readonly="readonly"
									value=""></div> 
							</div><!-- 이름 -->
							<div class="control-group info">
								<label class="control-label" for="mp1">개인연락처</label>
								<div class="controls">
									<select name="mp1" id="mp1" class="input-small">
										<option>국번</option>
										<option>010</option>
										<option>011</option>
										<option>018</option>
									</select>
									&mdash;<input type="text" name="mp2" id="mp2" class="span1" />
									&mdash;<input type="text" name="mp3" id="mp3" class="span1" />
								</div>
							</div><!-- 개인연락처 -->
						</fieldset>
						<input type="hidden" id="mp" name="mp">
					</form><!-- 주문 하는사람 -->
				
					<div><h4>받으실 분</h4></div>
					<form id="myinfofrm" class="well form-horizontal">
						<fieldset>
							<div class="d-info">
								<div class="chkright">
									<input type="checkbox"  class="control-ck"  value="option1" for="chkbox">
								</div>
								<label class="checkbox" for="name">배송지가 주문자 정보와 동일</label>
							</div><!-- 배송지 동일 체크 -->
							
							<div class="control-group info">
								<label class="control-label" for="name">이름</label>
								<div class="controls">
									<input type="text" name="name" id="name"
									class="span2"
									value=""></div> 
							</div><!-- 이름 -->
							<div class="control-group info">
								<label class="control-label" for="zip1">우편번호</label>
								<div class="controls">
									<input type="text" name="zip1" id="zip1"
									class="span1"  maxlength="3" readonly="readonly"> -
									<input type="text" name="zip2" id="zip2"
									class="span1"  maxlength="3" readonly="readonly">
									<a class="btn btn-inverse"  id="zipbtn">
										<i class="icon-question-sign icon-white">
										</i>&nbsp;우편번호 찾기</a>
								</div>	 
							</div><!-- 우편번호 -->
							<div class="control-group info">
								<label class="control-label" for="addr">주소</label>
								<div class="controls">
									<input type="text" name="addr" id="addr"
									class="span3" >
									<input type="text" name="etcaddr" id="etcaddr"
									class="span3" >
									</div> 
							</div><!-- 주소 및 나머지 주소 -->
							<div class="control-group info">
								<label class="control-label" for="mp1">개인연락처</label>
								<div class="controls">
									<select name="mp1" id="mp1" class="input-small">
										<option>국번</option>
										<option>010</option>
										<option>011</option>
										<option>018</option>
									</select>
									&mdash;<input type="text" name="mp2" id="mp2" class="span1" />
									&mdash;<input type="text" name="mp3" id="mp3" class="span1" />
								</div>
							</div><!-- 개인연락처 -->
						</fieldset>
						<div class="tcenter">
							<a class="btn btn-primary" id="savebtn"> <i
								class="icon-ok icon-white"></i>&nbsp;결제하기
							</a> <a class="btn btn-danger" id="cancelbtn"> <i
								class="icon-remove icon-white"></i>&nbsp;취소하기
							</a>
						</div>
						<input type="hidden" id="zipcode" name = "zipcode">
						<input type="hidden" id="mp" name="mp">
					</form>
				</div><!-- 회원가입 -->
			</div>
</article>
<!-- 우편번호 찾기 모달창 시작 -->
<div class="modal hide fade" id="zipcodemodal" role="dialog">
		<div class="modal-header">
			<h3>우편번호 찾기<button type="button" class="close" data-dismiss="modal"><b>X</b></button></h3>
		</div>	
		<div class="modal-body">
			<form class="form-horizontal" name="zipfrm">
				<div class="control-group error">
				<label class="control-label" for="dong">검색할 주소의 <br>동이름을 입력하세요</label>
				<div class="controls dragdown">
					<input type="text" name="dong" id="dong" class="span3">
					<a class="btn btn-inverse" id="findbtn">검색하기</a>
				</div>
				</div>
				<div class="tcenter">지역의 읍/면/동 이름을 공백없이 입력하신 후, [검색]버튼을 클릭하세요</div>
				<div class="tcenter topmargin" >
					<select size="10" class="span5" id="ziplist"></select>
				</div>
			</form>
		</div>	
		<div class="modal-footer">
			<a class="btn btn-danger" id="sendbtn">선택하고 닫기</a>
		</div>	
</div>

<script>
	
	$("#savebtn").on("click",function(event){
			if($("#pwd").val()=="")alert();
			else if($("#pwdcheck").val()=="n")
				alert("비밀번호가 일치하지 않습니다.");
			else if($("#chkcaptcha").val() == "n")
				alert("자동가입방지문자를 확인하세요!!");
			else{
				 $("#email").val($("#email1").val()+"@"+$("#email2").val());
				 $("#mp").val($("#mp1").val()+$("#mp2").val()+$("#mp3").val());
				 $("#zipcode").val($("#zip1").val()+"-"+$("#zip2").val());
				 $("#myinfofrm").attr("method","post");
				 $("#myinfofrm").submit();
			 }
			

	});
	$("#cancelbtn").on("click",function(event){
		$(location).attr("href","<c:url value='/index.mvc'/>");
	});
</script><!--이메일 선택-->
<script>
	$("#zipbtn").on("click",function(event){
		$("#ziplist *").remove();
		$("#zipcodemodal").modal('show');
	});
	$("#findbtn").on("click",function(event){
		var result = "<option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option><option>123-123 서울 광진구 자양동</option>";	
		$("#ziplist *").remove();
		$(result).appendTo("#ziplist");
	});
	$("#sendbtn").on("click",function(event){
		var zip = $("#ziplist").val().split(" ");
		$("#zip1").val(zip[0].split("-")[0]);
		$("#zip2").val(zip[0].split("-")[1]);
		$("#addr").val(zip[1]+" "+zip[2]+" "+zip[3]);
		$("#zipcodemodal").modal('hide');
	});
</script><!--//-->
















